    <form id="config_proxy" method="POST" onSubmit="onSubmit(); return false;">
        <div class="row-fluid">
            <div class="span4">
                <label for="enable-proxy">{{ _( "LAN proxy" ) }} <a href="https://github.com/XX-net/XX-Net/wiki/GoAgent-Intranet-proxy" target="_blank">({{ _( "Help" ) }})</a></label>
            </div> <!-- .span4 -->
            <div class="span8">
                <input id="enable-proxy" type="checkbox" data-toggle="switch"/>
            </div> <!-- .span8 -->
        </div> <!-- .row-fluid -->
        <p class="tip">* {{ _( "Generally not needed, only those who need internal proxy to access the external network (companies, Intranet, campus, etc.) need to configure this." ) }}</p>
        <div id="proxy-options" style="display: none;">
            <div class="row-fluid">
                <div class="span4">
                    <label for="proxy-type">{{ _( "Proxy type" ) }}</label>
                </div> <!-- .span4 -->
                <div class="span8">
                    <select id="proxy-type">
                        <option value="HTTP">HTTP</option>
                        <option value="SOCKS4">SOCKS 4</option>
                        <option value="SOCKS5">SOCKS 5</option>
                    </select>
                </div> <!-- .span8 -->
            </div> <!-- .row-fluid -->
            <div class="row-fluid">
                <div class="span4">
                    <label for="proxy-host">{{ _( "Proxy IP address or domain name" ) }}</label>
                </div> <!-- .span4 -->
                <div class="span8">
                    <input id="proxy-host" type="text" placeholder="Example: 127.0.0.1"/>
                </div> <!-- .span8 -->
            </div> <!-- .row-fluid -->
            <div class="row-fluid">
                <div class="span4">
                    <label for="proxy-port">{{ _( "Port" ) }}</label>
                </div> <!-- .span4 -->
                <div class="span8">
                    <input id="proxy-port" type="number" min="1" max="65535" placeholder="Example: 8080"/>
                </div> <!-- .span8 -->
            </div> <!-- .row-fluid -->
            <div class="row-fluid">
                <div class="span4">
                    <label for="proxy-username">{{ _( "User name" ) }}</label>
                </div> <!-- .span4 -->
                <div class="span8">
                    <input id="proxy-username" type="text"/>
                </div> <!-- .span8 -->
            </div> <!-- .row-fluid -->
            <div class="row-fluid">
                <div class="span4">
                    <label for="proxy-password">{{ _( "Password" ) }}</label>
                </div> <!-- .span4 -->
                <div class="span8">
                    <input id="proxy-password" type="password"/>
                </div> <!-- .span8 -->
            </div> <!-- .row-fluid -->
        </div> <!-- #proxy-options -->

        <div class="row-fluid">
            <div class="span12">
                <button class="btn btn-primary btn-block" type="submit">{{ _( "Save" ) }}</button>
            </div> <!-- .span12 -->
        </div> <!-- .row-fluid -->
    </form>

<script type="text/javascript">
    $(function () {
        $('[data-toggle=switch]').wrap('<div class="switch" />').parent().bootstrapSwitch();
    });
</script>

<script type="text/javascript">
    $('#enable-proxy').change(function () {
        var isChecked = $(this).is(':checked');
        if (isChecked) {
            $('#proxy-options').slideDown();
        } else {
            $('#proxy-options').slideUp();
        }
    });
</script>

<script type="text/javascript">
    $(function () {
        $.ajax({
            type: 'GET',
            url: '/config_proxy?cmd=get_config',
            dataType: 'JSON',
            success: function (result) {
                if (typeof(result['enable']) != 'undefined' && result['enable'] != 0) {
                    $('#enable-proxy').parent().removeClass('switch-off');
                    $('#enable-proxy').parent().addClass('switch-on');
                    $('#enable-proxy').prop('checked', true);
                    $('#proxy-options').slideDown();
                }
                $('#proxy-type').val(result['type']);
                $('#proxy-host').val(result['host']);
                $('#proxy-port').val(result['port']);
                $('#proxy-username').val(result['user']);
                $('#proxy-password').val(result['passwd']);
            },
            error: function () {
                tip('{{ _( "Failed reading the settings." ) }}', 'error');
            }
        });
    });
</script>

<script type="text/javascript">
    function onSubmit() {
        var enable = $('#enable-proxy').is(':checked') ? 1 : 0;
        var host = $('#proxy-host').val();
        var port = $('#proxy-port').val();
        if (enable) {
            if ((host == "127.0.0.1" || host == "localhost") && (port == 8086 || port == 8087 || port == 1080)) {
                tip('{{ _( "Do you really need LAN proxy? <a href="https://github.com/XX-net/XX-Net/wiki/LAN-proxy-setting">Help</a>." ) }}', 'error');
                return;
            }
        }

        var config = {
            'enable': enable,
            'type': $('#proxy-type').val(),
            'host': host,
            'port': port,
            'user': $('#proxy-username').val(),
            'passwd': $('#proxy-password').val()
        };

        tip('{{ _( "Checking settings ..." ) }}', 'info');

        $.ajax({
            type: 'GET',
            url: '/config_proxy?cmd=set_config',
            data: config,
            dataType: 'JSON',
            success: function (result) {
                if (result['res'] == 'success') {
                    tip('{{ _( "Settings saved successfully." ) }}', 'success');
                } else {
                    tip('{{ _( "Failed saving settings: " ) }}'+ result['reason'], 'error');
                }
            },
            error: function () {
                tip('{{ _( "Failed saving settings." ) }}', 'error');
            }
        });
    }
</script>
